import { connect } from "react-redux";
import {
	EnvironmentOutlined,
	CloudUploadOutlined,
	BilibiliOutlined,
	PieChartOutlined,
	MinusSquareFilled
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu } from "antd";

type MenuItem = Required<MenuProps>["items"][number];
const items: MenuItem[] = [
	{ key: "1", icon: <MinusSquareFilled />, label: "首页" },
	{ key: "2", icon: <PieChartOutlined />, label: "图表" },
	{ key: "3", icon: <BilibiliOutlined />, label: "视频播放器" },
	{
		key: "sub1",
		label: "文件上传",
		icon: <CloudUploadOutlined />,
		children: [
			{ key: "5", label: "单文件上传" },
			{ key: "6", label: "多文件上传" },
			{ key: "7", label: "文件夹上传" },
			{ key: "8", label: "大文件上传" }
		]
	},
	{
		key: "sub2",
		label: "地图",
		icon: <EnvironmentOutlined />,
		children: [
			{ key: "9", label: "地图导航" },
			{ key: "10", label: "地图定位" }
		]
	}
];
const LayoutMenu = (props: any) => {
	console.log(props);
	const { isCollapse } = props;
	return (
		<>
			<Menu
				defaultSelectedKeys={["1"]}
				defaultOpenKeys={["sub1"]}
				mode="inline"
				theme="dark"
				inlineCollapsed={isCollapse}
				items={items}
			/>
		</>
	);
};
// export default LayoutMenu;
const mapStateToProps = (state: any) => state.menu;
export default connect(mapStateToProps)(LayoutMenu);
